<template>
    <view class="tree-main">
        <view class="tree-wrap">
            <treeItem
                v-for="(model, i) in treeDataSource"
                :num="i"
                @openExpand="openExpand"
                :model="model"
                :key="i">
            </treeItem>
        </view>
    </view>
</template>

<script>
    import treeItem from './tree.vue'
	export default {
		data() {
			return {
                treeDataSource: []
			};
		},
        components: {
           treeItem
        },
        props: {
            list: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        created() {
           this.getList()
        },
        methods: {
            getList(flag = false) {
                this.initTreeData()
            },
            initTreeData() {
                // 临时储存数据
                let tempData = JSON.parse(JSON.stringify(this.list))
                let reduceDataFunc = (data, level) => {
                    data.map((m, i) => {
                        m.isExpand = m.isExpand || false
                        m.item = m.item || []
                        m.level = level
                        if (m.item.length > 0) {
                            reduceDataFunc(m.item, level + 1)
                        }
                    })
                }
                reduceDataFunc(tempData, 1)
                this.treeDataSource = tempData
            },
            openExpand(m, i) {
                m.isExpand = !m.isExpand
                this.treeDataSource[i] = m
                this.$forceUpdate() //更新页面数据视图
            }
        }
	}
</script>

<style lang="scss">
    .tree-wrap{
        border-bottom: 2rpx solid #CCCCCC;
    }
</style>
